<template>
  <div class="statistics-container">
    <el-row gutter="20">
      <!-- 流量卡片 -->
      <el-col :span="8">
        <el-card :body-style="{ padding: '20px', borderRadius: '10px' }" class="traffic-card">
          <div class="card-header">
            <h3 class="card-title">
              流量
              <el-tooltip class="item" effect="dark" content="来自于ebay Api total_impression_total数据, 商品出现在搜索结果或推荐中的次数。是「被看到」的次数 " placement="top">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </h3>
            <p class="date-range">{{ dateRange }}</p>
          </div>
          <div class="card-body">
            <p class="number">{{ current.total_impression_total }} <span>本期流量</span></p>
            <div class="comparison">
            <p>对比期: {{ compare.total_impression_total }}</p>
              <p>本期: 对比上期 <span :class="rate.total_impression_total>=0?'positive':'negative'">{{ rate.total_impression_total>=0?'+':'' }}{{ rate.total_impression_total }}%</span></p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 点击量卡片 -->
      <el-col :span="8">
        <el-card :body-style="{ padding: '20px', borderRadius: '10px' }" class="clicks-card">
          <div class="card-header">
            <h3 class="card-title">
              点击量
              <el-tooltip class="item" effect="dark" content="点击量:指用户点击了页面的次数。点击率: 点击次数/总流量" placement="top">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </h3>
            <p class="date-range">{{ dateRange }}</p>
          </div>
          <div class="card-body " style="display: flex; justify-content: space-between;">
            <div>
            <p class="number">{{ current.listing_views_total }} <span>本期点击量</span></p>
            <div class="comparison">
              <p>对比期: {{ compare.listing_views_total }}</p>
              <p>本期: 对比上期 <span :class="rate.listing_views_total>=0?'positive':'negative'">{{ rate.listing_views_total>=0?'+':'' }} {{ rate.listing_views_total }}%</span></p>
            </div>
            </div>

            <div>
            <p class="number" style="font-size: 20px;">{{ current.click_through_rate }}% <span>本期点击率</span></p>
            <div class="comparison">
              <p>对比期: {{ compare.click_through_rate }}%</p>
              <p>本期: 对比上期 <span :class="rate.click_through_rate>=0?'positive':'negative'">{{ rate.click_through_rate>=0?'+':'' }}{{ rate.click_through_rate }}%</span></p>
            </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 成交量卡片 -->
      <el-col :span="8">
        <el-card :body-style="{ padding: '20px', borderRadius: '10px' }" class="conversions-card">
          <div class="card-header">
            <h3 class="card-title">
              成交量
              <el-tooltip class="item" effect="dark" content="成交量:指用户购买了产品的件数。成交率: 成交件数/总点击量" placement="top">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </h3>
            <p class="date-range">{{ dateRange }}</p>
          </div>
          <div class="card-body" style="display: flex; justify-content: space-between;">
            <div>
              <p class="number">{{ current.transaction }} <span>本期成交量</span></p>
              <div class="comparison">
              <p>对比期: {{ compare.transaction }}</p>
                <p>本期: 对比上期 <span :class="rate.transaction>=0?'positive':'negative'">{{ rate.transaction>=0?'+':'' }}{{ rate.transaction }}%</span></p>
              </div>
            </div>

            <div>
              <p class="number">{{ current.sales_conversion_rate }} <span>本期转化率</span></p>
              <div class="comparison">
              <p>对比期: {{ compare.sales_conversion_rate }}</p>
                <p>本期: 对比上期 <span :class="rate.sales_conversion_rate>=0?'positive':'negative'">{{ rate.sales_conversion_rate>=0?'+':'' }}{{ rate.sales_conversion_rate }}%</span></p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
    </el-row>
  </div>
</template>

<script>
export default {

  // 
  props: {
    cardOptions: {
      type: Object,
      default: () => null,
      required: true
    },
    params: {
      type: String,
      default: null,
      required: false
    },
  },

  beforeMount() {
    this.query_data = this.cardOptions.query_data
      // 根据 query_data 获取数据
      if(this.query_data){
        this.updateData(this.query_data.url.params)
      }
  },

  watch: {
    params: {
      handler(newVal) {
        if(newVal){
          this.updateData(newVal)
        }
      },
      deep: true
    }
  },
  
  data() {
    return {
      // 当前时间段和对比时间段
      dateRange: "2025-10-1至2025-10-7", // 示例时间段
      current: {
      },
      compare:{},
      rate:{}
    };
  },
  methods: {


    updateData(params) {
      console.log("更新数据中...");
      let { method, api } = this.query_data.url
      
      this.$http(method, params?api+params:api).then(res => {

        /**
         * 
        "current":{
            "total_impression_total": traffic_res[0] or 0,
            "listing_views_total": traffic_res[1] or 0,
            "transaction": traffic_res[2] or 0,
            "click_through_rate": round((traffic_res[3] or 0) * 100, 2),
            "sales_conversion_rate": round((traffic_res[4] or 0) * 100, 2),
        },
        "compare":{
            "total_impression_total": compare_res[0] or 0,
            "listing_views_total": compare_res[1] or 0,
            "transaction": compare_res[2] or 0,
            "click_through_rate": round((compare_res[3] or 0) * 100, 2),
            "sales_conversion_rate": round((compare_res[4] or 0) * 100, 2),
        }
         */
        this.current = res.data.current
        this.compare = res.data.compare

        let rate =  {}

        for (const key in res.data.current) {


          if(res.data.current[key] == 0 && res.data.compare[key] == 0){
            rate[key] = 0
            continue
          }
          

          if(res.data.compare[key] == 0){
            rate[key] = 100
            continue
          }
          else {
            rate[key] = ((parseFloat(res.data.current[key]) - parseFloat(res.data.compare[key])) / parseFloat(res.data.compare[key]) * 100).toFixed(2)
          }
        }

        this.rate = rate
        this.dateRange = res.data.date_range[0] + " 至" + res.data.date_range[1]
      })
    }
  }
};
</script>

<style scoped>
.statistics-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-row {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #444;
}

.date-range {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.card-body {
  font-size: 14px;
  color: #666;
}

.comparison {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

span {
  font-size: 14px;
}

.positive {
  color: #4caf50; /* 绿色 */
}

.negative {
  color: #f44336; /* 红色 */
}

/* 卡片样式 */
.traffic-card,
.clicks-card,
.conversions-card {
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.traffic-card {
  border-left: 5px solid #4e8cde; /* 颜色边框 */
}

.clicks-card {
  border-left: 5px solid #ff9800; /* 颜色边框 */
}

.conversions-card {
  border-left: 5px solid #8bc34a; /* 颜色边框 */
}

.el-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Tooltip样式 */
.el-tooltip__popper {
  font-size: 13px;
}

.el-icon-info {
  font-size: 16px;
  color: #6c757d;
  cursor: pointer;
}
</style>
